<template>
  <view class="charge-bg">
    <!-- 钱包卡片 -->
    <view class="wallet-head-card">
      <view class="card-title">我的钱包</view>
      <view class="card-balance">{{ formatBalance(balance) }}</view>
      <image class="card-bgicon" src="/static/wallet-bg.png" mode="aspectFit" />
    </view>
    <!-- 内容卡片 -->
    <!-- 充值金额 -->
    <view class="main-card">
      <view class="block">
        <view class="block-title">充值金额</view>
        <view class="grid">
          <view v-for="(val, idx) in amounts" :key="idx" :class="['amount-card', selectedAmountIdx===idx ? 'active' : '']" @click="selectAmount(idx)">
            {{ idx === amounts.length - 1 ? '自定义' : val + '元' }}
          </view>
        </view>
      </view>
    </view>
    <!-- 自定义金额 -->
    <view v-if="isCustom" class="main-card">
      <view class="block">
        <view class="block-title">自定义金额</view>
        <view class="input-row">
          <input class="custom-input" v-model="customAmount" type="digit" placeholder="请输入金额" />
          <view class="unit">元</view>
        </view>
      </view>
    </view>
    <!-- 支付方式 -->
    <view class="main-card">
      <view class="block">
        <view class="block-title pay-title">支付方式</view>
        <view class="pay-list">
          <view v-for="item in pays" :key="item.value" class="pay-item" @click="payType=item.value">
            <image class="pay-icon" :src="item.icon" />
            <view class="pay-info">
              <view class="pn">{{item.name}}</view>
              <view class="desc">{{item.desc}}</view>
            </view>
            <view class="pay-radio">
              <view class="circle-radio" :class="{checked:payType===item.value}">
                <view v-if="payType===item.value" class="inner"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="charge-btn-wrapper">
      <button class="charge-btn" :disabled="!finalAmount" :class="{disabled:!finalAmount}" @click="submit">立即充值</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app'

const amounts = [100, 200, 500, 1000, 2000, 2000]
const selectedAmountIdx = ref(-1)
const customAmount = ref('')
const payType = ref('ali')
const balance = ref(0)

// 判断是否选择了自定义
const isCustom = computed(() => {
  return selectedAmountIdx.value === amounts.length - 1
})

const pays = [
  {
    value:'ali',
    name:'支付宝支付',
    desc:'支付宝安全支付',
    icon:'/static/ali-pay.png',
  },
  {
    value:'wx',
    name:'微信支付',
    desc:'亿万用户的选择，更快更安全',
    icon:'/static/wx-pay.png',
  }
]

// 格式化余额显示（将分转换为元，保留两位小数）
const formatBalance = (value) => {
  // 如果值是分（整数），转换为元
  if (value && value >= 100) {
    return (value / 100).toFixed(2)
  }
  // 如果已经是元（小数），直接格式化
  if (value) {
    return parseFloat(value).toFixed(2)
  }
  return '0.00'
}

function selectAmount(idx) {
  selectedAmountIdx.value = idx
  if (idx !== amounts.length - 1) {
    // 如果不是选择自定义，清空自定义金额
    customAmount.value = ''
  }
}
const finalAmount = computed(() => {
  if (isCustom.value) {
    // 如果选择了自定义，使用自定义金额
    return customAmount.value
  }
  // 否则使用选中的固定金额
  if (selectedAmountIdx.value >= 0 && selectedAmountIdx.value < amounts.length) {
    return amounts[selectedAmountIdx.value]
  }
  return ''
})
function submit() {
  if(!finalAmount.value) {
    uni.showToast({title: '请输入/选择金额', icon:'none'})
    return
  }
  uni.showToast({title: '充值请求已发起', icon:'success'})
}

// 页面加载时接收余额参数
onLoad((options) => {
  if (options && options.balance) {
    balance.value = parseFloat(options.balance) || 0
  }
})
</script>

<style lang="scss" scoped>
.charge-bg { 
  min-height: 100vh; 
  background: #f7f7fa; 
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
}
.wallet-head-card {
  margin: 30rpx 18rpx 0 18rpx;
  background-image: url('/static/money-bj.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24rpx;
  padding: 40rpx 44rpx 32rpx 44rpx;
  position: relative;
  overflow: hidden;
  color: #fff;
  .card-title { font-size: 27rpx; margin-bottom: 24rpx; font-weight: 400; }
  .card-balance { font-size: 56rpx; font-weight: bold; margin-bottom: 0; }
  .card-bgicon { position: absolute; right: 22rpx; top: 18rpx; width: 160rpx; height: 110rpx; opacity: 0.18; }
}
.main-card {
  margin: 28rpx 18rpx 0 18rpx;
  background: #fff;
  border-radius: 22rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.04);
  padding: 18rpx 0 2rpx 0;
  .block { padding: 0 30rpx 22rpx 30rpx; }
  .block:last-child { padding-bottom: 22rpx; }
  .block-title { font-size: 28rpx; color: #101010; font-weight: bold; margin: 20rpx 0 24rpx 0; }
  .custom-block { padding-top: 0; }
  .grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24rpx 20rpx; margin-bottom: 5rpx;
    .amount-card {
      height: 108rpx; line-height: 108rpx;
      border-radius: 18rpx;
      font-size: 28rpx; font-weight: 500; color: #121729;
      background: #fcfdff; border: 2.2rpx solid #e1e9fa;
      text-align: center; transition: all .18s; cursor: pointer;
      &.active {
        background: #eef5ff; color: #3887ff; border-color:#3989fd;
        box-shadow: 0 2rpx 8rpx #91bfff26;
      }
    }
  }
  .input-row {
    display: flex; align-items: center; background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    .custom-input {
      font-size: 28rpx; border: none;
      flex: 1;
      padding: 0; margin: 0;
      background: transparent;
      color: #333;
      height: 92rpx; line-height: 92rpx;
    }
    .unit { color: #888; font-size: 28rpx; margin-left: 10rpx; }
  }
  .pay-title { margin-bottom: 25rpx; margin-top: 32rpx; }
  .pay-list {
    display: flex; flex-direction: column; gap: 25rpx; margin-bottom: 30rpx;
    .pay-item {
      background: transparent;
      border-radius: 18rpx;
      display: flex; align-items: center;
      padding: 18rpx 22rpx 18rpx 0rpx;
      position: relative;
      box-shadow: none;
      cursor: pointer;
      .pay-icon { width: 65rpx; height: 65rpx; border-radius: 50%; background: #f7f7fb; margin: 0 26rpx 0 8rpx; }
      .pay-info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
      .pn { font-size: 28rpx; font-weight: 500; color: #272727; margin-bottom: 5rpx; }
      .desc { font-size: 22rpx; color: #babdc1; }
      .pay-radio { margin-left: 28rpx; }
      .circle-radio {
        width: 44rpx; height: 44rpx;
        border: 2rpx solid #d8e4ff;
        border-radius: 50%; background: #fafcff;
        display: flex; align-items: center; justify-content: center;
        transition: border-color .15s;
        &.checked {
          border: 2.8rpx solid #3887ff;
        }
        .inner {
          width: 22rpx; height: 22rpx; border-radius: 50%;
          background: #3887ff; box-shadow: 0 1rpx 6rpx #3887ff23;
        }
      }
    }
  }
}
.charge-btn-wrapper {
  margin-top: 30rpx;
  padding: 0 42rpx;
  margin-bottom: 40rpx;
}
.charge-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 900rpx;
  background: linear-gradient(90deg,#b488ff 0%,#7fc2ff 100%);
  color: #fff;
  font-size: 30rpx;
  font-weight: 400;
  border: none;
  display: block;
  box-shadow: 0 2rpx 12rpx #bbbeee40;
  letter-spacing: 2rpx;
  transition: opacity .17s;
  &.disabled { opacity:.36; }
}
</style>
